<template>
	<view class="login">
		<view class="login-title">动物识别系统登录</view>
		<view class="login-content">
			<view class="login-username">
				<!-- <uni-icons type="email" size="25"></uni-icons> -->
				<uni-easyinput prefixIcon="email" placeholder="请输入邮箱" v-model="email" 
				placeholderStyle="color:green">
					
				</uni-easyinput>
				<!-- <input type="text" placeholder="  请输入账号" v-model="email"> -->
			</view>
			<view class="login-password">
				<uni-easyinput type="password" prefixIcon="locked" placeholder="请输入密码" v-model="password" placeholderStyle="color:green">
					
				</uni-easyinput>
				
<!-- 				<uni-icons type="locked" size="25"></uni-icons>
				<input type="password"  placeholder="  请输入密码" v-model="password"> -->
			</view>
		</view>
		<view class="button"><button @click="onsubmit">登录</button></view>
		<view class="button" style="color: blue;"><button @click="onsubmitTemp">测试账号</button></view>
		<view class="login-botton">
			<view class="login-password" @click="findPassword">找回密码</view>
			<span>|</span>
			<view class="login-zhuce">
				<navigator url="/pages/register/index">注册账号</navigator>
			</view>
		</view>
		<!-- 其他的登录方式 -->
		<view class="login-other">
			<view class="login-top" style="color: green;">
				其他的登录方式
			</view>
			<view class="login-icon">
				<view @click="loginOther('QQ')">
					<uni-icons type="qq" size="30" ></uni-icons>
				</view>
				<view @click="loginOther('微信')">
					<uni-icons type="weixin" size="30" ></uni-icons>
				</view>
				

				<!-- <image src="/static/uni.png" mode="widthFix"></image> -->
				<!-- <image src="/static/uni.png" mode="widthFix"></image> -->
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js'
export default {
	onLoad() {
		

		// uni.getDeviceInfo({
		// 	success: function (res) {
		// 		console.log(res)
		// 	}
		// })
		
		
		
		uni.request({
			url:"user/flush",
			method:"GET",
			header:{'Authorization':uni.getStorageSync('token')},
			success(res) {
				res = res.data
				if(res.code == 200){
					uni.setStorage({
						key:"token",
						data:res.data
					})
					uni.switchTab({
						url:"/pages/home/index",
					})
				}else{
					uni.showToast({
						title:"请登录",
						icon:"none"
					})
				}
			}
		})
	},
	data() {
		return {
			email:'',
			password:'',
			rules: {									
				email: [{ required: true, message: '请输入邮箱', rule: '/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/',trigger: 'blur'}],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
			}
		};
	},
	methods: {
		onsubmitTemp(){
			this.email = '332209078@qq.com'
			this.password = '123456'
			this.onsubmit()
		},
		onsubmit() {
			if(this.email==''||this.password==''){
				uni.showToast({
					title:"内容不能为空哦！",
					icon:"none"
				})
			}else{
				let data={
					email:this.email,
					password:this.password
				}
				console.log("data")
				console.log(data)
				uni.request({
					url: 'user/login',
					method: 'POST',
					data: data,
					success: res => {
						console.log("res");
						console.log(res);
						if(res.data.code == 200){
							uni.showToast({
								title: res.data.msg,
								icon: 'success'
							})
							uni.setStorage({
								key: 'uuid',
								data: res.data.data.uuid,
							});
							uni.setStorage({
								key: 'username',
								data: res.data.data.username,
							});
							uni.setStorage({
								key: 'token',
								data: res.data.data.token,
							});
							uni.setStorage({
								key:'userInfo',
								data:res.data.data
							});
							console.log("data")
							console.log(res.data.data)
							
							//跳转到tab页
							uni.switchTab({
								//传递水印
								url: '/pages/home/index'
							});
						}else{
							if(res.data.msg.length == 0){
								uni.showToast({
									title: "网络信号弱，请检查网络",
									icon: 'none'
								})
							}else{
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}

						}
					}
				});
				}
		},
		findPassword() {
			uni.showToast({
				title: "暂不支持找回密码，请联系管理员。",
				icon: 'none'
			})
		},
		loginOther(type){
			uni.showToast({
				title: `暂不支持${type}登录，请使用账号登录。`,
				icon: 'none'
			})

		}
	}
};
</script>

<style lang="less">
.login {
	 // background-image: linear-gradient(120deg, #05ee28, #6a3dad);
	 background-color: #fff;
	width: 100%;
	background-position: center;
	background-size: cover;
	// background-color: #464646;
	margin:0px;
	background-size:100% 100%;
	background-attachment:fixed;
	height: 1535rpx;
	opacity: 0.8;
	.login-title {
		padding-top: 150rpx;
		display: flex;
		justify-content: flex-start;
		margin-left: 50rpx;
		font-weight: 700;
		font-size: 40rpx;
		color: #11cd6e;
		letter-spacing: 5rpx;
		margin-bottom: 50rpx;
	}
	.login-content{
		.login-username{
			display: flex;
			align-items: center;
		    margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;
			input{
				padding: 10rpx;
				height: 60rpx;
				width: 80%;
			}
			i {
				color: #11c53e;
				padding-right: 20rpx;
				font-size: 50rpx;
			}
		}
		.login-password{
			display: flex;
			align-items: center;
		    margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 50rpx;
			input{
				padding: 10rpx;
				height: 60rpx;
				width: 80%;
			}
			i {
				color: #11c53e;
				padding-right: 20rpx;
				font-size: 50rpx;
			}
		}
	}
	.button{
		margin-top: 120rpx;
		
		button{
			background-color:#11c53e;
			width: 90%;
			height: 85rpx;
			text-align: center;
			line-height: 85rpx;
			color: #fff;
		}
	}
	.login-botton{
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
		.login-password{
			padding: 0 15rpx;
			color: #11c53e;
		}
		.login-zhuce{
			padding: 0 15rpx;
			color: #11c53e;
		}
	}
	.login-other{
		position: absolute;
		bottom: 100rpx;
	    left: 37%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.login-top{
			text-align:center;
		}
		.login-icon{
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;
			image{
				width: 80rpx;
			}
		}
	}
	
}
</style>

